import {View, Text, ScrollView} from "@tarojs/components";
import { Button, Empty} from "@antmjs/vantui";
import AssetImage from "@/common/AssetImage";
import React, { useEffect, useState} from "react";
import {ExpressModel} from "@/common/apis/model";
import {getExpress} from "@/common/apis/home_datasource";
import LogUtils from "@/utils/log";
import Utils from "@/utils/common";
import CellX from "@/components/cell_x";

definePageConfig({
  navigationBarTitleText: '积分明细'
})

export default function IntegralInfo() {
  const [items, setItems] = useState<ExpressModel[]>()

  useEffect(() => {
    getExpress().then((res) => {
      setItems(res)
    })
    return () => {
      LogUtils.info("FaPiaoList", "FaPiaoList")
    }
  }, []);


  return (
    <View style={{
      display: 'flex',
      flexDirection: 'column',
      position: 'relative',
      overflow: 'hidden',
      height: '100VH',
      paddingBottom: '20px',
      boxSizing: 'border-box'
    }}>
      <CellX
        vPadding={'10px'}
        renderTitle={<View
          style={{display: 'flex', flexDirection: 'column', justifyContent: 'center', color: 'white'}}>
          <Text>可用积分</Text>
          <View style={{marginTop: '10px'}}>
            <Text style={{fontSize: '20px', fontWeight: 'bold'}}>0</Text>
            <Text style={{fontSize: '10px', marginLeft: '5px', color: 'rgba(255, 255, 255, 0.5)'}}>待释放积分</Text>
            <Text style={{fontSize: '10px'}}>100</Text>
          </View>
        </View>}
        renderRightIcon={<View>{<Button size='mini' style={{'--button-mini-border-radius': '15px'}}>说明</Button>}
        </View>}/>
      <Text style={{marginLeft: '20px'}}>积分明细</Text>
      <ScrollView scrollY style={{height: '100%', boxSizing: 'border-box'}}>
        {items && !Utils.isEmpty(items) ? items.map((e, i) => {
          return <View key={e.code}>
            <CellX
              backgroundColor={AssetImage.bg2}
              renderTitle={<View style={{display: 'flex', flexDirection: 'column'}}>
                <Text style={{fontSize: '12px'}}>注册赠送积分</Text>
                <Text style={{color: 'gray', fontSize: '10px'}}>2025-03-13 15:48(凯普乐科技)</Text>
              </View>}
              renderExtra={<Text>{e.code}</Text>}
            />
          </View>
        }) : <Empty description='暂无数据'/>}
      </ScrollView>
    </View>
  )
}


